<template>
  <div class="websocket-demo">

    <!-- 消息输入和发送 -->
    <div class="message-box">
      <input
        v-model="messageInput"
        placeholder="输入消息"
        :disabled="!isConnected"
        @keyup.enter="sendMessage"
      />
      <button
        @click="sendMessage"
        :disabled="!isConnected"
      >
        发送
      </button>
    </div>

    <!-- 消息列表 -->
    <div class="message-list">
      <div v-for="(msg, index) in messages" :key="index" class="message">
        [{{ msg.timestamp }}] {{ msg.content }} {{ content }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import axios from "axios";

// 响应式数据
const isConnected = ref(true)
const messages = ref([])
const messageInput = ref('')
const ws = ref(null)
const content = ref('')

// 发送消息
const sendMessage = () => {
  if (messageInput.value.trim()) {
    addMessage({
      type: 'sent',
      content: messageInput.value,
      timestamp: new Date().toLocaleTimeString()
    })

    fetch('http://localhost:8090/ai/generateStream?message=' + messageInput.value, {
      responseType: 'stream'
    }).then(async response => {
      const reader = response.body.getReader();
      const decoder = new TextDecoder('utf-8');

      let contentData = {
        type: 'sent',
        timestamp: new Date().toLocaleTimeString()
      }
      
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value, { stream: true });
        // contentData.content += chunk;
        // messages.value[messageLength - 1 + 1] = contentData 
        content.value += chunk;
      }
      addMessage(contentData)
    })
    messageInput.value = ''
    // content.value = ''
  }
}

// 添加消息到列表
const addMessage = (message) => {
  messages.value.push(message)
}

// 添加系统消息
const addSystemMessage = (content) => {
  messages.value.push({
    type: 'system',
    content,
    timestamp: new Date().toLocaleTimeString()
  })
}

// 组件挂载时自动连接（可选）
onMounted(() => {
  // connect()
})

// 组件卸载前关闭连接
onBeforeUnmount(() => {
  // disconnect()
})
</script>

<style scoped>
.websocket-demo {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.status {
  padding: 8px;
  margin-bottom: 20px;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}

.status.connected {
  background-color: #dff0d8;
  color: #3c763d;
}

.status.disconnected {
  background-color: #f2dede;
  color: #a94442;
}

.message-box {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.message-box input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.message-list {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.message {
  margin: 8px 0;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.message[data-type="sent"] {
  background-color: #d1ecf1;
  text-align: right;
}

.message[data-type="received"] {
  background-color: #fff3cd;
}
</style>